MatchesOverview.render - Code Metrics - Inspection of "Minify HTML on build." - soniCaH/KCVV-Elewijt-Gatsby - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — feature/minify-html ( 6d6e54 )

by Kevin Van

created 2020-06-13 09:40 UTC

MatchesOverview.render B

↳ Parent: Project

Complexity

Conditions

Size

Total Lines	52
Code Lines	45

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
cc	5
eloc	45
dl	0
loc	52
rs	8.3333
c	0
b	0
f	0

How to fix Long Method

import React, { Component, Fragment } from "react"
import { graphql, StaticQuery } from "gatsby"
import "./matches-overview.scss"
import moment from "moment"
import { mapMatchStatus, formatDivision } from "../scripts/helper"
import "moment/locale/nl-be"

class MatchesOverview extends Component {
  constructor(props) {
    super(props)

    this.state = {
      data: [],
      loading: true,
    }

    this.apiServerUrl = props.config.site.siteMetadata.serverUrl
    this.apiLogoUrl = props.config.site.siteMetadata.logoUrl
    this.apiRefreshRate = props.config.site.siteMetadata.refreshRate
    this.timeout = {}
  }

  updateData() {
    const { season, regnumber } = this.props

    fetch(
      `${this.apiServerUrl}/seasons/${season}/matches/upcoming/${regnumber}`
    )
      .then((response) => response.json())
      .then((json) => this.setState({ data: json, loading: false }))

    this.timeout = setTimeout(() => {
      this.updateData(() => {})
    }, this.apiRefreshRate)
  }

  componentDidMount() {
    this.updateData()
  }

  componentWillUnmount() {
    clearInterval(this.timeout)
  }

  render() {
    if (this.state.loading === false && this.state.data) {
      this.state.data.sort((a, b) => a.dateTime - b.dateTime)

      if (this.state.data.length <= 0) {
        return (
          <div className="matches_overview__wrapper">
            Geen wedstrijden gevonden.
          </div>
        )
      }

      moment.locale("nl-be")
      let matchTime = moment()

      const ignore = this.props.exclude || []

      return (
        <div className="matches_overview__wrapper">
          {this.state.data.map((match, i) => {
            if (ignore.includes(match.division)) {
              return <Fragment key={i} />
            }

            matchTime = moment(match.dateTime)
            return (
              <div key={i}>
                <span className={"label"}>
                  {formatDivision(match.division, match.region)}
                </span>
                <span className={"matches_overview__date"}>
                  {matchTime.format("ddd D MMMM - H:mm")}
                </span>

                {match.status ? (
                  <span className={"label alert matches_overview__status"}>
                    {mapMatchStatus(match.status)}
                  </span>
                ) : (
                  ""
                )}
                <h6>
                  {match.home} - {match.away}
                </h6>
              </div>
            )
          })}
        </div>
      )
    } else {
      return <div>Loading...</div>
    }
  }
}

const query = graphql`
  query {
    site {
      siteMetadata {
        serverUrl
        refreshRate
      }
    }
  }
`

export default ({ season, regnumber, exclude }) => (
  <StaticQuery
    query={query}
    render={(data) => (
      <MatchesOverview
        config={data}
        season={season}
        regnumber={regnumber}
        exclude={exclude}
      />
    )}
  />
)


1			import React, { Component, Fragment } from "react"
2			import { graphql, StaticQuery } from "gatsby"
3			import "./matches-overview.scss"
4			import moment from "moment"
5			import { mapMatchStatus, formatDivision } from "../scripts/helper"
6			import "moment/locale/nl-be"
7
8			class MatchesOverview extends Component {
9			constructor(props) {
10			super(props)
11
12			this.state = {
13			data: [],
14			loading: true,
15			}
16
17			this.apiServerUrl = props.config.site.siteMetadata.serverUrl
18			this.apiLogoUrl = props.config.site.siteMetadata.logoUrl
19			this.apiRefreshRate = props.config.site.siteMetadata.refreshRate
20			this.timeout = {}
21			}
22
23			updateData() {
24			const { season, regnumber } = this.props
25
26			fetch(
27			`${this.apiServerUrl}/seasons/${season}/matches/upcoming/${regnumber}`
28			)
29			.then((response) => response.json())
30			.then((json) => this.setState({ data: json, loading: false }))
31
32			this.timeout = setTimeout(() => {
33			this.updateData(() => {})
34			}, this.apiRefreshRate)
35			}
36
37			componentDidMount() {
38			this.updateData()
39			}
40
41			componentWillUnmount() {
42			clearInterval(this.timeout)
43			}
44
45			render() {
46			if (this.state.loading === false && this.state.data) {
47			this.state.data.sort((a, b) => a.dateTime - b.dateTime)
48
49			if (this.state.data.length <= 0) {
50			return (
51			<div className="matches_overview__wrapper">
52			Geen wedstrijden gevonden.
53			</div>
54			)
55			}
56
57			moment.locale("nl-be")
58			let matchTime = moment()
59
60			const ignore = this.props.exclude \|\| []
61
62			return (
63			<div className="matches_overview__wrapper">
64			{this.state.data.map((match, i) => {
65			if (ignore.includes(match.division)) {
66			return <Fragment key={i} />
67			}
68
69			matchTime = moment(match.dateTime)
70			return (
71			<div key={i}>
72			<span className={"label"}>
73			{formatDivision(match.division, match.region)}
74			</span>
75			<span className={"matches_overview__date"}>
76			{matchTime.format("ddd D MMMM - H:mm")}
77			</span>
78
79			{match.status ? (
80			<span className={"label alert matches_overview__status"}>
81			{mapMatchStatus(match.status)}
82			</span>
83			) : (
84			""
85			)}
86			<h6>
87			{match.home} - {match.away}
88			</h6>
89			</div>
90			)
91			})}
92			</div>
93			)
94			} else {
95			return <div>Loading...</div>
96			}
97			}
98			}
99
100			const query = graphql`
101			query {
102			site {
103			siteMetadata {
104			serverUrl
105			refreshRate
106			}
107			}
108			}
109			`
110
111			export default ({ season, regnumber, exclude }) => (
112			<StaticQuery
113			query={query}
114			render={(data) => (
115			<MatchesOverview
116			config={data}
117			season={season}
118			regnumber={regnumber}
119			exclude={exclude}
120			/>
121			)}
122			/>
123			)
124

soniCaH / KCVV-Elewijt-Gatsby

Push — feature/minify-html ( 6d6e54 )

MatchesOverview.render B

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like